<!DOCTYPE html>

<html>
<head>
    <title>OSS in Browser</title>
    <script src="https://www.promisejs.org/polyfills/promise-6.1.0.js"></script>
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.3.0.min.js"></script>
    {{--<script type="text/javascript" src="js/app.js"></script>--}}
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="main">
    <div class="page-header">
        <h1>OSS <small>in</small> Browser</h1>
    </div>
    <table>
        <tr>
            <td>
                <div class="panel panel-primary">
                    <div class="panel-heading">Upload file</div>
                    <div class="panel-body">
                        <form action="" class="form-horizontal">
                            <div class="form-group">
                                <label>Select file</label>
                                <input type="file" id="file" />
                            </div>
                            <div class="form-group">
                                <label>Store as</label>
                                <input type="text" class="form-control" id="object-key-file" value="object" />
                            </div>
                            <div class="form-group">
                                <input type="button" class="btn btn-primary" id="file-button" value="Upload" />
                            </div>
                        </form>
                        <br />
                        <div class="progress">
                            <div id="progress-bar"
                                 class="progress-bar"
                                 role="progressbar"
                                 aria-valuenow="0"
                                 aria-valuemin="0"
                                 aria-valuemax="100" style="min-width: 2em;">
                                0%
                            </div>
                        </div>
                    </div>
                </div>
            </td>
            <td>
                <div class="panel panel-success">
                    <div class="panel-heading">Upload content</div>
                    <div class="panel-body">
                        <form action="" class="form-horizontal">
                            <div class="form-group">
                                <label>Content</label>
                                <textarea class="form-control" id="file-content" rows="3">Hello, OSS!</textarea>
                            </div>
                            <div class="form-group">
                                <label>Store as</label>
                                <input type="text" class="form-control" id="object-key-content" value="object" />
                            </div>
                            <div class="form-group">
                                <input type="button" class="btn btn-primary" id="content-button" value="Save" />
                            </div>
                        </form>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="panel panel-info">
                    <div class="panel-heading">List files</div>
                    <div class="panel-body">
                        <table class="table table-striped" id="list-files-table">
                            <tr>
                                <th>Key</th>
                                <th>Size</th>
                                <th>LastModified</th>
                            </tr>
                        </table>
                        <input type="button" class="btn btn-primary" id="list-files-button" value="Refresh" />
                    </div>
                </div>
            </td>
            <td>
                <div class="panel panel-warning">
                    <div class="panel-heading">Download file</div>
                    <div class="panel-body">
                        <form action="" class="form-horizontal">
                            <div class="form-group">
                                <label>Object key</label>
                                <input type="text" class="form-control" id="dl-object-key" value="object" />
                            </div>
                            <div class="form-group">
                                <label>Save as</label>
                                <input type="text" class="form-control" id="dl-file-name" value="filename" />
                            </div>
                            <div class="form-group">
                                <input type="button" class="btn btn-primary" id="dl-button" value="Download" />
                            </div>
                        </form>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                Powered by
                <a href="https://www.aliyun.com/product/oss">OSS</a> &
                <a href="https://github.com/ali-sdk/ali-oss">ali-oss</a></td>
        </tr>
    </table>
</div>
<script>
    'use strict';

    var appServer = 'http://localhost:3000';
    var bucket = '<bucket-name>';
    var region = 'oss-cn-hangzhou';

    var urllib = OSS.urllib;
    var Buffer = OSS.Buffer;
    var OSS = OSS.Wrapper;
    var STS = OSS.STS;

    // Play without STS. NOT SAFE! Because access key id/secret are
    // exposed in web page.

    var client = new OSS({
        region: 'oss-cn-beijing',
        accessKeyId: '{{$AccessKeyId}}',
        accessKeySecret: '{{$AccessKeySecret}}',
        stsToken: '{{$SecurityToken}}',
        bucket: 'fbw',
        secure: true
    });

     var applyTokenDo = function (func) {
       return func(client);
     };

    var progress = function (p) {
        return function (done) {
            var bar = document.getElementById('progress-bar');
            bar.style.width = Math.floor(p * 100) + '%';
            bar.innerHTML = Math.floor(p * 100) + '%';
            done();
        }
    };

    var uploadFile = function (client) {
        var file = document.getElementById('file').files[0];
        var key = document.getElementById('object-key-file').value.trim() || 'object';
        console.log(file.name + ' => ' + key);

        return client.multipartUpload(key, file, {
            progress: progress
        }).then(function (res) {
            console.log('upload success: %j', res);
            return listFiles(client);
        });
    };

    var uploadContent = function (client) {
        var content = document.getElementById('file-content').value.trim();
        var key = document.getElementById('object-key-content').value.trim() || 'object';
        console.log('content => ' + key);

        return client.put(key, new Buffer(content)).then(function (res) {
            return listFiles(client);
        });
    };

    var listFiles = function (client) {
        var table = document.getElementById('list-files-table');
        console.log('list files');

        return client.list({
            'max-keys': 100
        }).then(function (result) {
            var objects = result.objects.sort(function (a, b) {
                var ta = new Date(a.lastModified);
                var tb = new Date(b.lastModified);
                if (ta > tb) return -1;
                if (ta < tb) return 1;
                return 0;
            });

            var numRows = table.rows.length;
            for (var i = 1; i < numRows; i ++) {
                table.deleteRow(table.rows.length - 1);
            }

            for (var i = 0; i < Math.min(3, objects.length); i ++) {
                var row = table.insertRow(table.rows.length);
                row.insertCell(0).innerHTML = objects[i].name;
                row.insertCell(1).innerHTML = objects[i].size;
                row.insertCell(2).innerHTML = objects[i].lastModified;
            }
        });
    };

    var downloadFile = function (client) {
        var object = document.getElementById('dl-object-key').value.trim();
        var filename = document.getElementById('dl-file-name').value.trim();
        console.log(object + ' => ' + filename);

        var result = client.signatureUrl(object, {
            response: {
                'content-disposition': 'attachment; filename="' + filename + '"'
            }
        });
        window.location = result;

        return result;
    };

    window.onload = function () {
        document.getElementById('file-button').onclick = function () {
            applyTokenDo(uploadFile);
        }

        document.getElementById('content-button').onclick = function () {
            applyTokenDo(uploadContent);
        }

        document.getElementById('list-files-button').onclick = function () {
            applyTokenDo(listFiles);
        }

        document.getElementById('dl-button').onclick = function () {
            applyTokenDo(downloadFile);
        }

        applyTokenDo(listFiles);
    };
</script>
</body>
</html>
